<template>
  <div class="at-breadcrumb">
    <div class="at-breadcrumb-item" @click="handeClick(item)" v-for="(item, index) in data" :key="index">
      <div class="at-breadcrumb-label">{{ item.label }}</div>
    </div>
  </div>
</template>
<script setup>
// import { toQuery } from '@/utils/url'

const router = useRouter()

const props = defineProps({
  modelValue: String,
  data: Array,
})

const emit = defineEmits(['update:modelValue', 'change'])
const handeClick = item => {
  const { path, query } = item
  // const path = item.path.split('?')[0]
  // const query = toQuery(item.path)

  emit('update:modelValue', item.path)
  emit('change', item)
  router.push({ path, query })
}
</script>
<style lang="scss" scoped>
.at-breadcrumb {
  display: flex;
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.45);
}

.at-breadcrumb-item {
  display: flex;
  .at-breadcrumb-label {
    cursor: pointer;
  }
  &:after {
    content: ' / ';
    margin: 0 8px;
  }

  &:last-child {
    color: rgba(0, 0, 0, 0.8);
    .at-breadcrumb-label {
      cursor: inherit;
    }
    &:after {
      content: '';
    }
  }
}
</style>
